<template>
	<view class="sa-home-item" @click="player_item(itemData.id)">
		<view class="sa-home-item-border">
			<view class="sa-home-item-img" v-if="itemData.cover" :style="{ backgroundImage: 'url( ' + itemData.cover + ' )' }">
				<image :src="itemData.cover||itemData.headImg" mode="aspectFill"></image>
				<view class="store-name">{{ itemData.nowStoreName||'手机在线' }}</view>
			</view>
			<view class="sa-home-item-img" v-else :style="{ backgroundImage: 'url( ' + defaultImg + ' )' }">
				<view class="store-name">{{ itemData.nowStoreName||'手机在线' }}</view>
			</view>
			
		</view>
		<view class="play-bottom-card">
			<view class="flexr justify-between" style="padding: 0 16rpx;">
				<view class="play-nick-name flexr " >{{ itemData.nickName }} 
				<image v-if="itemData.gender==1" src="../../../static/new/Iconboy.png" mode=""></image>
				  <image v-if="itemData.gender==0" src="../../../static/new/iconGirl.png" mode=""></image>
				  </view>
				<!-- <view class="play-hourly-unit ">{{ itemData.nowStoreName||'手机在线' }}</view> -->
			</view>
			<view class=" play-hourly-unit elone" style="padding:10rpx 16rpx">{{itemData.sign|fomartSign}}</view>
			<!-- <view class="btn-box">
				<view class="flow-btn flexr" @click.stop="sayHello(itemData,1)" v-if="itemData.isSayHello"> <image src="../../../static/new/msgList.png" mode=""></image> 发消息</view>
				<view class="fans-btn flexr" @click.stop="sayHello(itemData)" v-else> <image src="../../../static/new/helloList.png" mode=""></image> 打招呼</view>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	import {
		isLogin,
		toLogin
	} from '@/config/common.js';
	import play_level_icon from '@/static/images/play-level-icon.png';
	import star from '@/static/images/star.png';
	import defaultImg from '@/static/default.jpg';

	export default {
		name: 'homeHot',
		props: {
			itemData: {
				Id: {
					type: String,
					default: ''
				},
				HeadImg: {
					type: String,
					default: ''
				},
				hobby: {
					type: String,
					default: ''
				},
				Score: {
					type: String,
					default: ''
				},
				LikeCount: {
					type: String,
					default: ''
				},
				NickName: {
					type: String,
					default: ''
				},
				Levels: {
					type: String,
					default: ''
				}
			}
		},
		filters:{
			fomartSign(str){
				if(str&&str!='undefined'){
					return str
				}else{
					return '还没有签名～'
				}
			}
		},
		data() {
			return {
				playLevelIcon: play_level_icon,
				defaultImg: defaultImg,
				star: star
			};
		},

		methods: {
			
			sayHello(item){
				this.$emit('change',item)
			},
			player_item(item_id) {
				if (isLogin()) {
					uni.navigateTo({
						url: '/pages/friend/kongjian?friendId=' + item_id
					});
				} else {
					toLogin();
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.btn-box {
		position: absolute;
		top: 10rpx;
		right: 20rpx;
		min-width: 170rpx;
	}

	.flow-btn {
		// background-color: $main-btn-orange-color;
	
		padding: 10rpx 24rpx 10rpx 24rpx;
		border-radius: 10rpx;
		margin-left: auto;
		font-size: $main-text-size-24;
		// width: 96rpx;
		border:1px solid $main-btn-orange-color;
		color:$main-btn-orange-color;
		text-align: center;
		// padding:0 20rpx;
		border-radius: 80px;
		image{
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.fans-btn {
		
		color: #fff;
		padding: 10rpx 24rpx 10rpx 24rpx;
		border-radius: 10rpx;
		margin-left: auto;
		font-size: $main-text-size-24;
		border:1px solid $main-btn-orange-color;
		color:$main-btn-orange-color;
		width: 96rpx;
		text-align: center;
		// padding:0 20rpx;
		border-radius: 80px;
		image{
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.sa-home-item {
		position: relative;
		width: 100%;
		height: 426rpx;
		border-radius: 20rpx;
		// box-shadow: 0rpx 4rpx 8rpx rgba(68, 68, 68, 0.16);
		background-color: #fff;
		font-size: 0;
		overflow: hidden;
	

		.sa-home-item-border {
			height: 310rpx;
			width: 100%;

			.play-icon {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				width: 80rpx;
				height: 40rpx;
				text-align: center;
				line-height: 44rpx;

				&-level {
					position: absolute;
					color: #ffffff;
					right: 10rpx;
					width: 40rpx;
					font-size: $main-text-size-24;
					font-style: oblique;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		&-img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx 20rpx 0 0;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}

		.play-bottom-card {
			width: 100%;
			height: 116rpx;
			position: relative;
			color: $main-text-color-gray-33;

			&-score {
				margin-left: 16rpx;
				display: flex;

				.play-bottom-card-score-item {
					display: flex;
					margin-right: 26rpx;
					align-items: center;

					.text {
						font-size: $main-text-size-24;
						font-family: 'SourceHanSansCN-Medium';
					}

					.icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 6rpx;
					}
				}
			}

			.play-nick-name {
				font-size: 16px;
				margin-top: 16rpx;
				margin-bottom: 4rpx;
				font-weight: bold;
				font-family: 'SourceHanSansCN-Medium';
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				image{
					width: 26rpx;
					height: 26rpx;
					margin-left: 10rpx;
				}
			
			}

			.play-hourly-price {
				margin-left: 16rpx;
				color: $main-text-color-main-orange;
			}

			.play-hourly-unit {
				font-size: 13px;
				color: #999;
			}

			.play-hourly-wage {
				font-size: $main-text-size-28;
				margin-bottom: 4rpx;
				font-family: 'SourceHanSansCN-Regular';
			}
		}
	}
	
	.sa-home-item-img{
		position: relative;
		image{
			position:absolute;
			width: 100%;
			height: 100%;
		}
	}
	.store-name{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		background-color: rgba(0,0,0,0.4);
		color:#fff;
		font-size: 14px;
		text-align: center;
	}
</style>